<template>
  <div class="app-container">
    <div class="page-header">
      <h1>实时数据监测</h1>
      <p>实时监控各类能源数据变化</p>
    </div>
    
    <el-row :gutter="20" class="monitor-cards">
      <el-col :span="6">
        <el-card class="monitor-card">
          <div class="card-content">
            <div class="card-icon">
              <svg-icon icon-class="electricity" />
            </div>
            <div class="card-info">
              <h3>实时用电</h3>
              <p class="card-value">156.8 kW</p>
              <p class="card-status online">在线</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="monitor-card">
          <div class="card-content">
            <div class="card-icon">
              <svg-icon icon-class="water" />
            </div>
            <div class="card-info">
              <h3>实时用水</h3>
              <p class="card-value">23.4 m³/h</p>
              <p class="card-status online">在线</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="monitor-card">
          <div class="card-content">
            <div class="card-icon">
              <svg-icon icon-class="gas" />
            </div>
            <div class="card-info">
              <h3>实时用气</h3>
              <p class="card-value">8.9 m³/h</p>
              <p class="card-status online">在线</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="monitor-card">
          <div class="card-content">
            <div class="card-icon">
              <svg-icon icon-class="heat" />
            </div>
            <div class="card-info">
              <h3>实时用热</h3>
              <p class="card-value">45.6 GJ/h</p>
              <p class="card-status online">在线</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="monitor-charts">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>实时数据曲线</span>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <svg-icon icon-class="chart" />
              <p>实时数据趋势图</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>设备状态监控</span>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <svg-icon icon-class="monitor" />
              <p>设备状态分布图</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="monitor-data">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>实时数据列表</span>
          </template>
          <el-table :data="dataList" style="width: 100%">
            <el-table-column prop="device" label="设备名称" width="150" />
            <el-table-column prop="type" label="数据类型" width="120" />
            <el-table-column prop="value" label="当前值" width="100" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="150" />
            <el-table-column prop="operation" label="操作" width="120">
              <template #default>
                <el-button size="small" type="primary">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const dataList = ref([
  {
    device: '配电柜01',
    type: '电压',
    value: '220.5',
    unit: 'V',
    status: '正常',
    updateTime: '2024-01-15 14:30:25'
  },
  {
    device: '配电柜01',
    type: '电流',
    value: '45.6',
    unit: 'A',
    status: '正常',
    updateTime: '2024-01-15 14:30:25'
  },
  {
    device: '水表01',
    type: '流量',
    value: '23.4',
    unit: 'm³/h',
    status: '正常',
    updateTime: '2024-01-15 14:30:20'
  },
  {
    device: '气表01',
    type: '流量',
    value: '8.9',
    unit: 'm³/h',
    status: '正常',
    updateTime: '2024-01-15 14:30:18'
  }
])

onMounted(() => {
  console.log('实时数据监测初始化')
})
</script>

<style lang="scss" scoped>
.page-header {
  margin-bottom: 20px;
  
  h1 {
    color: #303133;
    margin: 0 0 8px 0;
  }
  
  p {
    color: #606266;
    margin: 0;
  }
}

.monitor-cards {
  margin-bottom: 20px;
}

.monitor-card {
  .card-content {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .card-icon {
      font-size: 32px;
      color: #409eff;
    }
    
    .card-info {
      flex: 1;
      
      h3 {
        margin: 0 0 8px 0;
        color: #303133;
        font-size: 14px;
      }
      
      .card-value {
        margin: 0 0 4px 0;
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
      
      .card-status {
        margin: 0;
        font-size: 12px;
        
        &.online {
          color: #67c23a;
        }
        
        &.offline {
          color: #f56c6c;
        }
      }
    }
  }
}

.monitor-charts {
  margin-bottom: 20px;
  
  .chart-container {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .chart-placeholder {
      text-align: center;
      color: #909399;
      
      .svg-icon {
        font-size: 48px;
        margin-bottom: 16px;
      }
      
      p {
        margin: 0;
        font-size: 14px;
      }
    }
  }
}

.monitor-data {
  .el-table {
    margin-top: 0;
  }
}
</style>
